<docs>
  ## 定点医院变更
</docs>
<template>
  <div class="fixedBox">
    <mheader type="index" @back_btn="goBack()" title="定点医院变更"></mheader>
    <!-- 选择地区开始 -->
    <div class="choice">
      <p class="hospital"><a href="http://fuwu.rsj.beijing.gov.cn/LDJAPP/search/ddyy/index_new.jsp">北京市医疗保险定点医疗机构、定点零售药店查询</a></p>
      <co-form :model="data" :rules="rules" ref="form">
         <co-area prop="xghddyljg1" label="定点医院1" max-length="100"
        v-model="data.xghddyljg1" placeholder="请输入"></co-area>
        <co-input prop="xghdmid1" label="定点医院1编码" max-length="100"
        v-model="data.xghdmid1" placeholder="请输入"></co-input>
        <co-area prop="xghddyljg2" label="定点医院2" max-length="100"
        v-model="data.xghddyljg2" placeholder="请输入"></co-area>
        <co-input prop="xghdmid2" label="定点医院2编码" max-length="100"
        v-model="data.xghdmid2" placeholder="请输入"></co-input>
        <co-area prop="xghddyljg3" label="定点医院3" max-length="100"
        v-model="data.xghddyljg3" placeholder="请输入"></co-area>
        <co-input prop="xghdmid3" label="定点医院3编码" max-length="100"
        v-model="data.xghdmid3" placeholder="请输入"></co-input>
        <co-area prop="xghddyljg4" label="定点医院4" max-length="100"
        v-model="data.xghddyljg4" placeholder="请输入"></co-area>
        <co-input prop="xghdmid4" label="定点医院4编码" max-length="100"
        v-model="data.xghdmid4" placeholder="请输入"></co-input>
        <div class="_tip">注：请选择4家医院作为定点医疗机构，其中一家要求是社区医院。</div>
      </co-form>
    </div>
    <!-- 确定 -->
    <div class="next-step">
      <button class="btn btn-primary" @click="nextStep">确认变更</button>
    </div>
    <!-- 手机校验 -->
    <message-card :visible.sync="save.visible"
    :title="save.title" :btn-text="save.btnText"
    :btn-type="save.btnType" @btnClick="msgBtn" @iconCloseClick="iconCloseClick"
    :type="save.type=='success' ? 'success' : (save.type=='email'?'email':'fail')">
      <div class="_iphone">
        <co-input
          label="手机号"
          v-model="sjhm"
          @input="changePhone"
          placeholder="请输入"
        ></co-input>
        <div class="clearfix">
          <co-input
            style="width:70%;"
            class="left"
            label="短信验证码"
            max-length="4"
            v-model="sjyzm"
            placeholder="请输入"
            :disabled="yzmDisabled"
          ></co-input>
          <button
            type="button"
            style="width:30%;margin-top:0.25rem;"
            class="left btn btn-primary"
            @click="get_yzm"
            :disabled="disabled"
          >{{yzmCode}}</button>
        </div>
      </div>
    </message-card>
  </div>
</template>
<script>
import Mheader from '@/ldry/group/mheader/mheader';
import coForm from '@/base/form/form';
import coInput from '@/base/form/input';
import coArea from "@/base/form/textarea";
import coSelect from '@/base/form/select';
import MessageCard from "@/ldry/group/messageCard/messageCard";
import $ from 'common/js/axios';
import { validator } from 'common/js/valid';
import { mixinValid } from 'common/mixins/mixins';

export default {
  components: { coForm, coInput, coSelect, Mheader,coArea,MessageCard },
  name: 'reverseOne',
  mixins: [mixinValid],
  data() {
    return {
      yzmCode: "获取验证码",
      yzmDisabled:true,
      disabled: true,
      sjhm:"",
      sjyzm:"",
      save: {
        type: "email",
        btnText: "确定",
        btnType: "primary",
        title: "手机验证",
        visible: true
      },
      data: {
        xghddyljg1: '',
        xghdmid1: '',
        xghddyljg2: '',
        xghdmid2: '',
        xghddyljg3: '',
        xghdmid3: '',
        xghddyljg4: '',
        xghdmid4: ''
      },
      rules: {
        xghddyljg1: validator('64,"full","定点医院1",false'),
        xghdmid1: validator('8,"number","定点医院1编码",false'),
        xghddyljg2: validator('64,"full","定点医院2",false'),
        xghdmid2: validator('8,"number","定点医院2编码",false'),
        xghddyljg3: validator('64,"full","定点医院3",false'),
        xghdmid3: validator('8,"number","定点医院3编码",false'),
        xghddyljg4: validator('64,"full","定点医院4",false'),
        xghdmid4: validator('8,"number","定点医院4编码",false')
      }
    }
  },
  methods: {
    goBack(){
      this.$router.go(-1);
    },
    echo(){
      $.get("/dafwgl/personal/xxxg").then(res => {
        let _res = res.returnData;
        if (+_res.executeResult == 1) {
          var _data = _res.cbxx;
          this.data.xghddyljg1=_data.ddyljg1;
          this.data.xghdmid1=_data.ddyydmid1;

          this.data.xghddyljg2=_data.ddyljg2;
          this.data.xghdmid2=_data.ddyydmid2;

          this.data.xghddyljg3=_data.ddyljg3;
          this.data.xghdmid3=_data.ddyydmid3;

          this.data.xghddyljg4=_data.ddyljg4;
          this.data.xghdmid4=_data.ddyydmid4;
        } else {
          this.$alert({
            type: "warning",
            message: _res.message
          });
          return false;
        }
      });
    },
    nextStep(){
      //点击确认变更
      var _this = this;
      this.$refs.form.validate(()=>{
        this.$loading = true;
        $.post('/dafwgl/bxxxxg/ddyyxxxgBc',this.data).then((res)=>{
          let _res = res.returnData;
          if(+_res.executeResult == 1){
             this.$alert({
              type: 'success',
              message:'操作成功!',
              cb:function(){
                _this.goBack();
              }
            });
          }else{
            this.$alert({
              type: 'warning',
              message:_res.message
            });
            return false;
          }
        }).finally(()=>{
        this.$loading = false;
        });
      })
    },
    // 获取验证码
    get_yzm() {
      var _flag = 1
      var exc = /^1\d{10}$/;
      if (!exc.test(this.sjhm)) {
        this.$alert({
          type: "warning",
          message: "手机号码格式不正确!"
        });
        return;
      }
      if (_flag != 1) return
      $.get("/dafwgl/personal/fsdx", {
        params: {
          ylsjh: this.sjhm,
          code:'1'
        }
      })
        .then(res => {
          _flag = 0
          let _res = res.returnData;
          if (+_res.executeResult == 0) {
            this.$alert({
              type: "warning",
              message: _res.message
            });
            return false;
          }
          this.timeout();
        })
        .finally();
    },
     timeout() {
      let count = 60;
      let _this = this;
      _this.disabled = true;
      var countdown = setInterval(function() {
        _this.yzmCode = count + "s";
        if (count == 0) {
          _this.yzmCode = "发送验证码";
          _this.disabled = false;
          clearInterval(countdown);
        }
        count--;
      }, 1000);
    },
    // 输入手机校验预留手机方法
    changePhone(){
      if (this.sjhm.length < 11) return
      var exc = /^1\d{10}$/;
      if (!exc.test(this.sjhm)) {
        this.$alert({
          type: "warning",
          message: "手机号码格式不正确!"
        });
        return;
      }
      var _flag = 1
      if(_flag != 1) return
      $.post('/dafwgl/personal/checkSjh',{ylsjh: this.sjhm}).then((res) => {
        var data = res.returnData;
        _flag = 0
        if (data.executeResult == '0') {
          this.$alert({
            type: "warning",
            message: data.message
          });
          return;
        }else{
          this.disabled = false;
          this.yzmDisabled = false;
         }
      }).catch(() => {});
    },
    // 消息按钮点击处理
    msgBtn() {
      var _this = this
      if(this.save.type == 'email'){
        if (this.sjyzm == "") {
          this.$alert({
            type: "warning",
            message: "验证码不能为空!"
          });
          return
        }
        if (this.sjyzm.length < "4") {
          this.$alert({
            type: "warning",
            message: "验证码长度必须是4位!"
          });
          return
        }
        let _data = {
          ylsjh:this.sjhm,
          sjyzm:this.sjyzm
        }
        var _flag = 1
        if(_flag != 1) return
        $.post('/dafwgl/personal/checkSjyzm',_data).then((res) => {
          _flag = 0
          var data = res.returnData;
          if (data.executeResult == '0') {
            this.$alert({
              type: "warning",
              message: data.message
            });
            return;
          }else{
            _this.save.visible = false;
            _this.yzmCode = "发送验证码";
          }
        }).catch(() => {});
      }
    },
    // 点击×返回到首页
    iconCloseClick() {
      if (this.save.type == "email") {
        this.$router.push({ name: "dbbgdbbg" });
      }
    },
  },
  created() {
    this.echo();
  }
};
</script>
<style lang="scss" scoped>
  @import '~common/scss/variable.scss';
  .choice {
    border: $border;
    padding-left: $padding-base;
    padding-bottom: $padding-base;
    background-color: #fff;
    // margin-top: $margin-base;
    border: $border;
  }
  .next-step {
    // margin-top: $margin-base;
    width: 100%;
    box-sizing: border-box;
    padding: 10px $padding-base;
    .btn {
      width: 100%;
    }
  }
  ._tip{
    color: #ffa149;
    box-sizing: border-box;
    padding-right: $padding-base;
    line-height: 1.5;
    font-size: 0.414444rem;
  }
  .hospital {
    margin: 0.5rem auto;
    color: #246fed;
    text-align: center;
    font-size: $font-size-base;
}
</style>
